<template>
  <div class="text-swiper-container" :style="{ height: height }" v-if="textItems && textItems.length > 0">
    <Swiper :modules="swiperModules" :navigation="navigation" :pagination="{ clickable: true }"
            :autoplay="autoplay ? { delay: autoplayDelay } : false" :loop="textItems.length > 1"  :direction="direction" class="text-swiper">
      <SwiperSlide v-for="item in textItems" :key="item.id">
        <div class="slide-content">
          <header>
            <h3>{{ item.title }}</h3>
          </header>
          <main>
            <div class="content-scrollable">
              <p>{{ item.content }}</p>
            </div>
          </main>
        </div>
      </SwiperSlide>
    </Swiper>
  </div>
  <!-- 空状态 -->
  <div v-else class="empty-state" :style="{ height: height }">
    <p>暂无文字信息</p>
  </div>
</template>

<script lang="ts">
import {computed, defineComponent, PropType} from 'vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import SwiperCore, { Navigation, Pagination, Autoplay } from 'swiper';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

// 安装 Swiper 模块
SwiperCore.use([Navigation, Pagination, Autoplay]);

// 定义文字项数据类型
interface TextItem {
  id: string | number;
  title: string;
  content: string;
}

export default defineComponent({
  name: 'TextSwiper',
  components: {
    Swiper,
    SwiperSlide,
  },
  props: {
    // 文字数据数组
    textItems: {
      type: Array as PropType<TextItem[]>,
      required: true,
      default: () => [],
    },
    // 轮播高度
    height: {
      type: String,
      default: '100%',
    },
    // 是否自动播放
    autoplay: {
      type: Boolean,
      default: true,
    },
    // 自动播放延迟时间
    autoplayDelay: {
      type: Number,
      default: 10000,
    },
    // 是否显示导航按钮
    navigation: {
      type: Boolean,
      default: false,
    },
    // 是否显示分页器
    pagination: {
      type: Boolean,
      default: true,
    },
    // 轮播方向: 'horizontal' | 'vertical'
    direction: {
      type: String as PropType<'horizontal' | 'vertical'>,
      default: 'vertical',
      validator: (value: string) => ['horizontal', 'vertical'].includes(value),
    },
    //分页器颜色配置
    paginationColor: {
      type: String,
      default: 'rgba(0, 0, 0, 0.3)',
    },
    // 分页器激活状态颜色
    paginationActiveColor: {
      type: String,
      default: '#000',
    },
    // 标题样式配置
    titleFontSize: {
      type: String,
      default: '20px'
    },
    titleFontWeight: {
      type: [String, Number],
      default: 'normal'
    },
    titleColor: {
      type: String,
      default: '#0b0b0b'
    },
    titleAlign: {
      type: String,
      default: 'center'
    },
    // 内容样式配置
    contentFontSize: {
      type: String,
      default: '12px'
    },
    contentColor: {
      type: String,
      default: '#333'
    },
    contentLineHeight: {
      type: [String, Number],
      default: '1.7'
    }
  },
  setup(props) {
    // Swiper 模块
    const swiperModules = [Navigation, Pagination, Autoplay];

    // 根据方向计算导航按钮是否显示
    const showNavigation = computed(() => {
      return props.navigation;
    });

    return {
      swiperModules,
      showNavigation,
    };
  },
});
</script>

<style scoped lang="less">
// CSS 变量定义
.text-swiper-container {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  // 设置CSS变量
  --pagination-color: v-bind(paginationColor);
  --pagination-active-color: v-bind(paginationActiveColor);
  --title-font-size: v-bind(titleFontSize);
  --title-font-weight: v-bind(titleFontWeight);
  --title-color: v-bind(titleColor);
  --title-align: v-bind(titleAlign);
  --content-font-size: v-bind(contentFontSize);
  --content-color: v-bind(contentColor);
  --content-line-height: v-bind(contentLineHeight);

  .text-swiper {
    width: 100%;
    height: 100%;

    .slide-content {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;

      // 头部标题区域
      header {
        padding: 2px 20px;
        border-bottom: 1px solid #e8e8e8;
        //flex-shrink: 0;

        h3 {
          margin: 0;
          line-height: 1.4;
          font-size: var(--title-font-size);
          font-weight: var(--title-font-weight);
          color: var(--title-color);
          text-align: var(--title-align);
        }
      }

      // 主要内容区域
      main {
        flex: 1;
        padding: 2px 20px;
        overflow: hidden;

        .content-scrollable {
          height: 100%;
          overflow-y: auto;
          padding-right: 10px;

          // 自定义滚动条样式
          &::-webkit-scrollbar {
            width: 6px;

            &-track {
              border-radius: 3px;
            }

            &-thumb {
              background: rgba(0, 0, 0, 0.2);
              border-radius: 3px;

              &:hover {
                background: rgba(0, 0, 0, 0.3);
              }
            }
          }

          p {
            margin: 0;
            line-height: var(--content-line-height);
            font-size: var(--content-font-size);
            color: var(--content-color);
            white-space: pre-wrap;
            word-wrap: break-word;
            text-indent: 2em; // 首行缩进
          }
        }
      }
    }
  }
}

// 空状态样式
.empty-state {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;

  p {
    margin: 0;
    font-size: 1rem;
  }
}

// Swiper 自定义样式 - 导航按钮
:deep(.swiper-button-next),
:deep(.swiper-button-prev) {
  color: #666;
  background: rgba(255, 255, 255, 0.9);
  transition: all 0.3s ease;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  &:after {
    font-size: 14px;
  }

  &:hover {
    color: #333;
    background: rgba(255, 255, 255, 0.95);
    transform: scale(1.1);
  }
}

// Swiper 分页器样式
:deep(.swiper-pagination) {
  bottom: 12px !important;

  .swiper-pagination-bullet {
    width: 8px !important;
    height: 8px !important;
    background: var(--pagination-color) !important;
    opacity: 1 !important;
    transition: all 0.3s ease !important;

    &.swiper-pagination-bullet-active {
      background: var(--pagination-active-color) !important;
      transform: scale(1.3) !important;
    }
  }
}
</style>
